<template>
  <div
    v-if="prev || next"
    class="w-full p-4 lg:p-8 flex justify-between flex-wrap items-center border-t dark:border-gray-800"
  >
    <NuxtLink
      v-if="prev"
      :to="localePath(prev.uniPath, $i18n.locale)"
      class="text-primary-500 font-bold hover:underline flex items-center lg:p-2 pl-0"
    >
      <SvgIconArrowLeft class="Icon" />
      {{ prev.title }}
    </NuxtLink>
    <span v-else>&nbsp;</span>

    <NuxtLink
      v-if="next"
      :to="localePath(next.uniPath, $i18n.locale)"
      class="text-primary-500 font-bold hover:underline flex items-center lg:p-2 pr-0"
    >
      {{ next.title }}
      <SvgIconArrowRight class="Icon" />
    </NuxtLink>
    <span v-else>&nbsp;</span>
  </div>
</template>

<script>
export default {
  props: {
    prev: {
      type: Object,
      default: () => null,
    },
    next: {
      type: Object,
      default: () => null,
    },
  },
}
</script>
